<template>
  <div class="barTitle" :style="style">
    <b>{{ title || '标题' }}<em v-if="tips" class="tipsBox">{{ tips }}</em></b><slot />
    <!-- <el-button v-if="back" class="myBtn" @click="close">
      <el-icon color="#999" :size="16"><back /></el-icon> 返回</el-button> -->
      <div v-if="back || backUrl" class="myBtn" @click="close">
        <img src="/src/assets/back.png" alt="">
        返回
      </div>
      <div v-if="comfirmBtn" class="myBtn comfirmBtn" @click="comfirm">
          <el-icon size="18px" style="margin-right:5px;"><CircleCheck /></el-icon>
          保存
      </div>
  </div>
</template>

<script setup>
import { emitter } from '@/utils/bus.js'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
  title: '',
  style: '',
  tips: '',
  back: Boolean,
  backUrl:'',
  comfirmBtn:{
      type:Boolean,
      default:false
  }
})

const emit = defineEmits(['comfirm'])

const close = () => {
  if(props.backUrl){
    router.push(props.backUrl)
  }else{
    router.back(-1)
  }
}
const comfirm = ()=>{
  emit('comfirm')
}
</script>

<style lang="scss" scoped>
.barTitle{
    display: flex;
    box-sizing: border-box;
    align-items: center;
    padding: 0;
    height: 42px;
    background-color: rgba(0, 173, 110,0.08);
    margin: 0;
    color: #666;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    position:relative;
    &::before{
        content: '';
        display: block;
        width: 3px;
        background: #FF9C00;
        height: 14px;
        margin: 0 3px 0 0;
    }
    b{
        font-weight: 600;
        color: #333333;
        .tipsBox{
            color: #25B983;
            font-size: 12px;
            font-weight: 600;
        }
    }
    .myBtn{
      display: flex;
      align-items: center;
      position:absolute;
      right:0;
      top: 0;
      height: 100%;
      color:#333;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      padding: 0 17px;
      box-sizing: border-box;
      border: 1px solid #DDDDDD;
      border-radius: 2px;
      min-width:100px;
      &.comfirmBtn{
        right:100px;
        background-color: #04AE70;
        color: #fff;
        border: 1px solid #04AE70;
        &:hover{
          cursor: pointer;
          background-color: #049a63;
          color: #fff;
        }
      }
      &:hover{
        cursor: pointer;
        background-color: #00AF7010;
        color: #25B983;
      }
      img{
        display: block;
        height: 14px;
        margin: 0 10px 0 0;
      }
    }
}
</style>
